<template >
  <div style="width: 100%; min-height: 1000px; background-color: rgb(245 245 245)">
    <div class="title_styles">
      <div class="title_details">
        订单详情
      </div>
      <div class="reornum">
        申请订单编号：{{requestOrderNumber}}
      </div>

    </div>
    <div class="userInformation">
      <div class="top_title">
        <div class="box_style"></div>
        <div class="title_font">用户信息</div>
        <p class="title_right"></p>
      </div>
      <div class="top_data">
        <el-descriptions
          class="margin-top"
          :column="2"
          :size="size"
          border
        >
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              头像
            </div>
          </template>

          <img :src="userInformation.avatar" style="width: 60px;height: 60px;border-radius: 4px;" class="img_style">
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              昵称
            </div>
          </template>
          {{userInformation.nickName}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              手机号
            </div>
          </template>
          {{userInformation.mobile}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              ID
            </div>
          </template>
         {{userInformation.userId}}
        </el-descriptions-item>
        </el-descriptions>
      </div>
      <div class="top_title">
        <div class="box_style"></div>
        <div class="title_font">申请资料</div>
        <p class="title_right" @click="dialogTableVisible=true">查看全部资料 ></p>
        <el-dialog v-model="dialogTableVisible" title="申请资料">
          <p style=" font-size: 14px; font-weight: 900;color: #2d8cf0">基本信息</p>
          <el-divider style=" margin: 0;margin-top: -5px" />
          <div style="display: flex;flex-wrap: wrap" >
            <div class="information_item_style">
              <div style="display: flex">
                <div>姓名:</div>
                <div style="margin-left: 50px">{{userInfo.name}}</div>
              </div>
            </div>
            <div class="information_item_style">
              <div style="display: flex">
                <div>性别:</div>
                <div style="margin-left: 50px">{{userInfo.sex}}</div>
              </div>
            </div>
            <div class="information_item_style">
              <div style="display: flex">
                <div>年龄:</div>
                <div style="margin-left: 50px">{{userInfo.age}}</div>
              </div>
            </div>
            <div class="information_item_style">
              <div style="display: flex">
                <div>户籍:</div>
                <div style="margin-left: 50px">{{userInfo.censusRegister}}</div>
              </div>
            </div>
            <div class="information_item_style">
              <div style="display: flex">
                <div>户口:</div>
                <div style="margin-left: 50px">{{userInfo.registeredHk}}</div>
              </div>
            </div>
          </div>
          <p style=" font-size: 14px; font-weight: 900;color: #2d8cf0">车辆信息</p>
          <el-divider style=" margin: 0;margin-top: -5px" />
          <div style="display: flex;flex-wrap: wrap" >
            <div v-for="item in userInfo.carList"  class="information_item_style">
              <div style="display: flex">
                <div>行业:</div>
                <div style="margin-left: 50px">{{item.industry}}</div>
              </div>
              <div style="display: flex">
                <div>车辆状态:</div>
                <div style="margin-left: 50px">{{item.carState?'正常':'不正常'}}</div>
              </div>
              <div style="display: flex">
                <div>车辆座位:</div>
                <div style="margin-left: 50px">{{item.carNumber}}</div>
              </div>
              <div style="display: flex">
                <div>车辆动力:</div>
                <div style="margin-left: 50px">{{item.carPower}}</div>
              </div>
              <div style="display: flex">
                <div>是否个人名下非营运:</div>
                <div style="margin-left: 50px">{{item.isOperation==1?'是':'否'}}</div>
              </div>
              <div style="display: flex">
                <div>职务:</div>
                <div style="margin-left: 50px">{{item.job}}</div>
              </div>
              <div style="display: flex">
                <div>全款车目前市场价:</div>
                <div style="margin-left: 50px">{{item.totalPayment}}</div>
              </div>
              <div style="display: flex">
                <div>按揭车剩余本金:</div>
                <div style="margin-left: 50px">{{item.oddCorpus}}</div>
              </div>
            </div>
          </div>
        </el-dialog>
      </div>
      <el-row :gutter="24">
        <el-col :span="4" v-for="item in applicationaMaterials" :key="item.index">
          <div class="mid_div" :style="{background:`${item.color}`}">
            <img class="img_style"  src="../../../../public/logo.gif">
            <div class="mid_font">{{item.name}}</div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="userInformation" style="padding-top: 10px;padding-left: 10px;margin-top: 10px">
      <el-row :gutter="24">
        <el-col >
          <div class="title_fonts" >申请产品：<span style="font-size: 14px;">{{userInformation.productNameStr}}</span></div>
        </el-col>
<!--        <el-col :span="2" v-for="item in insureData" :key="item.index">-->
<!--          <div class="insureData_style"  @click="clickapply(item.id)">-->
<!--            <img class="img_style" :src="item.image">-->
<!--            <div class="mid_font">{{item.name}}</div>-->
<!--          </div>-->
<!--        </el-col>-->
      </el-row>
      <el-row :gutter="24">
        <el-col >
          <div class="title_fonts" >是否智能匹配：<span style="font-size: 14px;">{{matevalue}}</span></div>
        </el-col>
<!--        <el-col :span="1">-->
<!--          <p class="title_fonts">是否智能匹配：</p>-->
<!--        </el-col>-->
<!--        <el-col :span="1">-->
<!--          <p class="title_fonts"> {{matevalue}}</p>-->
<!--        </el-col>-->
      </el-row>
      <el-row :gutter="24">
        <el-col :span="2">
          <p class="title_fonts">订单配置：</p>
        </el-col>
        <el-col :span="22">
          <div style="height: 300px">
            <el-steps direction="vertical" :active="OrderConfiguration">
              <el-step title="业务员信息" />
              <div class="order_div" v-if="userInformation.salesman">
                  <div class="title_styles">
                    已分配业务员
                  </div>
                  <el-descriptions  direction="vertical" :column="5" border class="el_style">
                  <el-descriptions-item label="头像" ><img class="el_img" :src="userInformation.salesman.avatar"></el-descriptions-item>
                  <el-descriptions-item label="姓名">{{userInformation.salesman.name}}</el-descriptions-item>
                  <el-descriptions-item label="电话" >{{userInformation.salesman.mobile}}</el-descriptions-item>
<!--                    <el-descriptions-item label="微信" >{{userInformation.salesman.wiInfo}}</el-descriptions-item>-->
                    <el-descriptions-item label="操作">
                      <el-button
                          link
                          type="primary"
                          @click="improveRecords=true">
                        完善资料记录
                      </el-button>
                  </el-descriptions-item>
                </el-descriptions>
              </div>
              <div v-else>{{ '暂未分配' }}</div>

              <el-step title="权证信息" />
              <div class="order_div1" v-if="userInformation.warrant">
                <div class="title_styles">
                  已分配权证员
                </div>
                <el-descriptions  direction="vertical" :column="5" border class="el_style">
                  <el-descriptions-item label="头像" ><img class="el_img" :src="userInformation.warrant.avatar"></el-descriptions-item>
                  <el-descriptions-item label="姓名">{{userInformation.warrant.name}}</el-descriptions-item>
                  <el-descriptions-item label="电话" >{{userInformation.warrant.mobile}}</el-descriptions-item>
                  <el-descriptions-item label="操作">
                    <el-button
                        link
                        type="primary"
                        @click="reviewProcess=true">
                      审核流程
                    </el-button>
                  </el-descriptions-item>
                </el-descriptions>
              </div>
              <div v-else>{{ '暂未分配' }}</div>
              <el-step title="订单完成" />
              <div class="order_div2" v-if="defult">
                <div class="title_styles">
                  {{ description }}
                </div>
              </div>
            </el-steps>
          </div>
        </el-col>
      </el-row>

      <el-dialog v-model="improveRecords" title="完善资料记录" center>
        <div class="dialog">
          <el-collapse   accordion>
              <el-collapse-item v-for="(item,index) in ordeList" :title="item"  :name="index">
                <el-table :data="orderCompletionTitle[item]" stripe style="width: 100%">
                  <el-table-column prop="categoryName" label="类目" width="400px" />
                  <el-table-column prop="resultValue" label="处理结果" width="400px" />
                </el-table>
              </el-collapse-item>
          </el-collapse>
        </div>
      </el-dialog>


      <el-dialog v-model="reviewProcess" title="受审流程" center style="width: 800px">
        <el-steps :active='reviewproce' align-center class="steps_style">
          <el-step v-for="item in flowList" :title="item.fname"/>
<!--          <el-step v-for="item in flowList" :title="item.fname"  :description="item.description" />-->
<!--          <el-step title="银行面签填贷款申请表" description="Some description" />-->
<!--          <el-step title="考察抵押物和经营场地" description="Some description" />-->
<!--          <el-step title="银行出批复" description="Some description" />-->
<!--          <el-step title="银行面签抵押合同和借款合同" description="Some description" />-->
<!--          <el-step title="办理抵押" description="Some description" />-->
<!--          <el-step title="办公证" description="Some description" />-->
<!--          <el-step title="放款" description="Some description" />-->
        </el-steps>

        <hr/>
        <lable>实际放款：{{practicalAmount}}</lable>

      </el-dialog>
    </div>
  </div>
</template>


<script lang="ts" setup>

import {ref } from 'vue'
import * as getInformation from "@/api/guardPage/listDetails/index"

let reviewproce: number
let  description = '';
let  practicalAmount;
const router = useRouter();
let orderCompletionTitle=reactive([])
let ordeList=reactive([])
let flowList=reactive([])
getInformation.orderCompletionList(router.currentRoute.value.query.orderNo).then(res=>{
  orderCompletionTitle=res
  for (var data in res){
    ordeList.push(data)
  }
})

let defult = ref(0)
//审核流程
getInformation.getLoanProcess(router.currentRoute.value.query.orderNo).then(res=>{
  if (Object.keys(res).length==0 ) {
      reviewproce = 0
  }else{
     reviewproce=res.flowN;

     description = res.causeOfFailure;
     if (res.amount ==null || res.amount==0){
       practicalAmount = '---';
     }else {
       practicalAmount = res.amount;
     }
    for (var i=0;i<res.flow.length;i++){
      flowList.push({fname : res.flow[i].fname,description:res.flow[i].description});
    }

    defult.value = res.applyState
    // console.log(insureData)
    if (res.applyState==3){ //订单完成
      OrderConfiguration.value=3
    }else {
        OrderConfiguration.value= res.applyState +1
    }

    //console.log(flowList);
  }
})
let OrderConfiguration= ref(1)
let userInformation=ref({
  avatar:'',
  userId:'',
  orderNo:'',
  nickName:'',
  productNameStr:'',
  salesman:{
    avater:'',
    name:'',
    mobile:'',
    wiInfo:'',
  },
  warrant:{
    avatar:'',
    mobile:'',
    name:'',
    wxInfo:''
  }

})

let insureData = reactive([])
getInformation.getOrderInformation(router.currentRoute.value.query.orderNo).then(res=>{
  userInformation.value=res
})

const  clickapply =(id)=>{
  //console.log(id)
}

// 获取个人订单信息
// let userInfo = reactive({})
let applicationaMaterials = reactive([])
let userInfo = reactive({})
getInformation.getAllInformation(router.currentRoute.value.query.orderNo).then(res => {
  userInfo = res
})

const improveRecords =ref(false)
const reviewProcess = ref(false)
const dialogTableVisible = ref(false)

const size = ref('')
const matevalue="是";//匹配
const requestOrderNumber=router.currentRoute.value.query.orderNo;

</script>


<style lang="scss">
.el_img{
  width: 30px;
  height: 30px;
  border-radius: 4px;
}

.order_div1{
  position: absolute;
  display: flex;
  width: 80%;
  height: 70px;
  margin-top: 110px;
  margin-left: 30px;
  justify-content: left;

  .title_styles{
    width: 100px;
    height: 30px;
    padding-top: 30px;
    margin-top: 10px;
    border: 1px rgb(240 240 240) solid;
  }
}

.order_div2{
  position: absolute;
  display: flex;
  width: 80%;
  height: 70px;
  margin-top: 230px;
  margin-left: 30px;
  justify-content: left;
}

.order_div{
  position: absolute;
  display: flex;
  width: 80%;
  height: 70px;
  margin-top: 4px;
  margin-left: 30px;
  justify-content: left;

  .title_styles{
    width: 100px;
    height: 30px;
    padding-top: 30px;
    margin-top: 10px;
    border-bottom: 1px solid #d9d9d9;
  }
}

.steps_style{
  flex-wrap: wrap;

  el-step{
    width: 1000px;
  }
}

.information_item_style{
  flex-wrap: wrap;
  width: 250px;
  margin-top: 10px;
}

.bottom_div{
  display: flex;
  margin-top: -120px;



  .bottom_box{
    width: 120px;
    height: 40px;
    font-size: 10px;
    text-align: center;
    border: 1px solid rgb(245 245 245);
  }
}

.title_fonts{
  font-size: 14px;
}

.insureData_style{
  display: flex;
  font-size: 10px;

  .img_style{
    width: 10px;
    height: 10px;
    margin-top: 4px;
    margin-right: 5px;
  }

  .mid_font{
    font-size: 10px;
    font-weight: 900;
    color: rgb(237 109 75);
    text-decoration: underline;
  }
}

.mid_div{
  width: 150px;
  height: 90px;
  padding-top: 10px;
  margin-top: 20px;
  margin-right: 20px;
  margin-left: 20px;
  text-align: center;

  .mid_font{
    margin-top: 10px;
    font-size: 15px;
  }

  .img_style{
    width: 40px;
    height: 40px;
  }
}

.img_style{
  width: 15px;
  height: 15px;
}

.cell-item {
  display: flex;
  color: black;
  align-items: center;
}

.margin-top {
  width: 98%;
  margin: 0 auto;
}

.el-descriptions {
  margin-top: 10px;
}

.userInformation{
  width: 95%;
  min-height: 100px;
  padding: 0 0 20px;
  margin: 0 auto;
  background-color: white;

  .top_title{
    display: flex;
    padding-top: 20px;
    justify-content: space-between;
  }

  .title_right{
    width: 200px;
    font-size: 12px;
  }

  .title_font{
    width: 80%;
    margin: 6px 0 0;
    font-size: 16px;
    font-weight: 500;
  }

  .box_style{
    width: 2px;
    height: 15px;
    margin: 10px 0 0 10px;
    background-color: #2d8cf0;
  }
}

 .title_styles{
   display: flex;
   width: 100%;
   padding: 20px;
   justify-content: space-between;

   .title_details{
     width: 50%;
     padding-left: 15px;
     font-size: 16px;
     font-weight: 500;
   }

   .reornum{
     width: 50%;
     padding-right: 100px;
     font-size: 14px;
     text-align: right;
   }
 }

 .dialog{
  width: 100%;
  height: 600px;
  overflow: auto;
 }

</style>
